<template>
  <div>
    <div class="layout-content control-content">
      <!-- 查询表单 -->
      <Form ref="formInline" :model="searchfrom" inline class="from-content">
        <FormItem>
          <Input type="text" v-model="search.value1" placeholder="searchvalue1" />
        </FormItem>
        <FormItem>
          <Input type="text" v-model="search.value2" placeholder="searchvalue2" />
        </FormItem>
        <FormItem>
          <Button type="primary" @click="search()">查询</Button>
        </FormItem>
      </Form>

    </div>
    <div class="layout-content main-content">

      <Table ref="table" border :columns="fields" :data="tabledata" :height="tableHeight">
        <!-- table 操作 -->
        <template slot-scope="{ row }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="add()">添加</Button>
            <Button type="error" size="small" @click="remove(row.id)">删除</Button>
        </template>
      </Table>
      <!-- 分页区域 -->
      <div class="page-cut">
        <Page :total="40" size="small" show-elevator />
      </div>
    </div>
      <!-- 弹层 -->
      <Modal
          v-model="modal_visable"
          :title="modal_title"
          :loading="modalLoading"
          @on-visible-change="reset_modal_form()"
          :mask-closable="false">
          <!-- 弹层内容 -->
          <Form ref="modal_form" :model="modal_form" :rules="modal_form_rules">
            <FormItem prop="value">
                <Input type="text" v-model="modal_form.value" placeholder="value" />
            </FormItem>
          </Form>
          <div slot="footer">
              <Button @click="modal_cancel">取消</Button>
              <Button type="primary" @click="modal_ok">确定</Button>
          </div>
          <!-- 弹层内容 end -->
      </Modal>
  </div>
</template>

<script>
import mixin from '../Mixin/mix'
import { constants } from 'crypto';
export default {
  data() {
    return {
      // 弹层显示状态
      modal_visable:false,
      modal_title:'弹层标题',
      modalLoading:false,
      // 查询表单
      searchfrom: {
        value1: "",
        value2: ""
      },
      // 表格字段
      fields: [
        {
          title: "Name",
          key: "name"
        },
        {
          title: "Age",
          key: "age"
        },
        {
          title: "Address",
          key: "address"
        },
         {
              title: 'Action',
              slot: 'action',
              // width: 150,
              align: 'center'
          }
      ],
      // 表格数据
      tabledata: [],

      // 弹层表单
      modal_form:{
        value:''
      },
      // 弹层表单校验规则
      modal_form_rules:{
        value: [
          { required: true, message: '请添加', trigger: 'blur' }
        ],
      }
    };
  },
  mixins:[mixin],
  beforeMount() {
    this.loadData();
  },
  methods: {
    // 获取数据
    loadData() {
      this.tabledata = [
        {
          id:'01',
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          id:'02',
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          id:'03',
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          id:'04',
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ]
      console.log("loadData ...");
    },
    // 搜索
    search() {
      console.log("search ....");
      console.log(this.searchfrom);
      this.loadData();
    },
    // action 点击添加
    add(){
      this.modal_visable = true;
      console.log('add ...');
    },
    // action 点击删除
    remove(id){
      console.log('remove ...');
      console.log(id)
    },
    // 弹层点击确定回调
    modal_ok () {
      this.$refs["modal_form"].validate((valid) => {
          console.log(valid);
          if (valid) {
              this.$Message.success('Success!');
              this.modal_visable=false;
          } else {
              this.$Message.error('Fail!');
          }
      })
    },
    // 弹层点击确定回调
    modal_cancel () {
        // 弹层取消点击回调
        this.$Message.info('Clicked cancel');
        this.modal_visable=false;
    },
    // 弹层显示状态转变后清空表单
    reset_modal_form(){
      this.$refs["modal_form"].resetFields();
    }
  }
};
</script>

<style scoped>
@import "../../style/base.css";
</style>
